<template>
  <div>
    <p-form-model :model="form" :rules="rules" layout="inline">
      <p-form-model-item label="查询周期" prop="time">
        <p-range-picker
          :placeholder="['开始时间', '结束时间']"
          format="YYYY-MM-DD"
          :mode="mode"
          :value="value"
          @change="handleChange"
        />
      </p-form-model-item>
      <p-form-model-item label="销售组织">
        <SelectOrg v-model="form.salesOrgCode" @input="change" />
      </p-form-model-item>
      <p-form-model-item label="部门">
        <SelectOrg
          v-model="form.salesGroup"
          :options="depOptions"
          :value="text"
          :has-all="false"
          :label-in-value="true"
          :allow-clear="false"
          @input="orgChange"
        />
      </p-form-model-item>
      <p-button type="primary" class="btn-search" @click="handleSearch">
        搜索
      </p-button>
      <p-button class="btn-search" @click="handleReset">
        重置
      </p-button>
      <p-button @click="handleexport">
        导出
      </p-button>
      <div>
        <p-checkbox v-model="form.isFindName" @change="handleCheckbox">
          查询个人
        </p-checkbox>
        <p-form-model-item label="姓名">
          <SelectSearchPeople
            v-model="form.userId"
            style="width: 10vw"
            @change="hadleChange"
          />
        </p-form-model-item>
      </div>
    </p-form-model>
  </div>
</template>
<script>
import monent from 'moment';
const defaultForm = {
  time: undefined,
  timeEnd: '',
  timeStart: '',
  salesOrgCode: undefined,
  isFindName: true,
  userId: undefined,
  salesGroup: '',
  salesGroupName: undefined,
  salesGroupCode: undefined,
};
export default {
  props: {
    checked: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      rules: {
        time: [{ required: true, message: '请选择时间周期', trigger: 'bulr' }],
      },
      form: {
        ...defaultForm,
      },
      mode: ['date', 'date'],
      value: [],
    };
  },
  computed: {
    orgGroupOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'sales',
        isDict: false,
      });
    },
    orgKapmOptions() {
      return this.$store.getters.getOrg({
        code: this.form.salesOrgCode,
        type: 'kapm',
        isDict: false,
      });
    },
    depOptions() {
      return [...this.orgGroupOptions, ...this.orgKapmOptions];
    },
  },

  created() {
    this.getTime();
  },
  methods: {
    handleCheckbox(e) {
      this.form.isFindName = e.target.checked;
      this.$emit('update:checked', this.form.isFindName);
    },
    getTime() {
      const date = new Date();
      this.form.timeEnd = monent(date)
        .endOf('day')
        .format('YYYY-MM-DD HH:mm:ss');
      this.form.timeStart = monent()
        .subtract(6, 'months')
        .startOf('day')
        .format('YYYY-MM-DD HH:mm:ss');
      this.value = [this.form.timeStart, this.form.timeEnd];
    },
    handleSearch() {
      this.$emit('search', this.form);
    },
    handleReset() {
      this.form = { ...defaultForm };
      this.getTime();
      this.$emit('search', this.form);
    },
    handleexport() {
      this.$emit('export');
    },
    handleChange(value) {
      this.value = value;
      this.form.timeStart =
        monent(value[0]).format('YYYY-MM-DD') + ' ' + '00:00:00';
      this.form.timeEnd =
        monent(value[1]).format('YYYY-MM-DD') + ' ' + '23:59:59';
    },
    change() {
      this.form.salesGroup = '';
    },
    orgChange(val) {
      this.form.salesGroupCode = val.key;
      this.form.salesGroupName = val.label;
    },
    hadleChange(val) {
      this.form.userId = val[0];
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  box-sizing: border-box;
  background-color: #f7f7f8;
  padding: 10px;
  padding-bottom: 0px;
  width: 100%;
}
.poros-form-item {
  width: 25%;
  margin-bottom: 10px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 70px);
}
.btn-search {
  margin-right: 10px;
}
/deep/ .poros-form-item-label {
  width: 70px;
}
</style>
